import  { useState } from 'react';
import { Card, Tabs, Select, Button,Modal } from "antd"
import { SearchOutlined } from '@ant-design/icons';
import type {  ConfigProviderProps } from 'antd';
//定义表格数据
const Merchant = () => {


    const [size] = useState<SizeType>('small');
    type SizeType = ConfigProviderProps['componentSize'];

  
    return (
        <div className='m=auto w-[100%] m-t-5'>
            <Card title='店铺筛选' className='m-auto  w-[90%] rounded-none p-0'>
                <div style={
                    { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                }
                >
                    <p className='m-0'>品牌名称：</p>
                    <Select
                        className='rounded-none m-l-5 m-r-8'
                        defaultValue="lucy"
                        style={{ width: 120 }}
                        options={[
                            { value: 'jack', label: 'Jack' },
                            { value: 'lucy', label: 'Lucy' },
                            { value: 'Yiminghe', label: 'yiminghe' },
                            { value: 'disabled', label: 'Disabled', disabled: true },
                        ]}
                    />
                    <Button type="primary" className='rounded-none' icon={<SearchOutlined />}>查询</Button>
                </div>

            </Card >

            <Card className='w-[90%] m-auto mt-5 rounded-none'>
                <div className='flex justify-between items-center'>

                </div>

                <Tabs
                    defaultActiveKey="1"
                    type="card"
                    size={size}
                    // items={tabsItem}
                />
            </Card>


            {/* 修改弹出框 */}
            <Modal title="Basic Modal" >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
        </div >
    );
};

export default Merchant;